﻿<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Templates_Portal_Default" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">

<%--<acms:StyleSheet ID="StyleSheet3" Path="~/Css/smoothDivScroll.css" Media="Screen" runat="server" />


<acms:JavascriptFile ID="JavascriptFile1" Path="~/Scripts/jquery.ui.widget.js" runat="server" />
<acms:JavascriptFile ID="JavascriptFile2" Path="~/Scripts/jquery.smoothDivScroll-1.1-min.js" runat="server" />

	<script type="text/javascript">
	    // Initialize the plugin with no custom options
	    $(function() {
	    $("div#makeMeScrollable").smoothDivScroll({ autoScroll: "always", autoScrollDirection: "endlessloopright", autoScrollStep: 2, autoScrollInterval: 20 });
	    });
	</script>

	<!-- Styles for my specific scrolling content -->

	<style type="text/css">
		
		#backBtn{display:none;}
		
		#makeMeScrollable
		{
			width:100%;
			height: 362px;
			position: relative;
		}
		
		#makeMeScrollable div.scrollableArea .item
		{
			position: relative;
			float: left;
			margin: 0;
			padding: 0;
		}
		
		div.item {
	        float:left;
	        background-repeat:no-repeat;
	        background-position:top left;
	        width:960px;
	        height:362px;
        }

        .item a{
            display:block;
            height:0;
            overflow:hidden;
            width:960px;
            padding-top:362px;
          }

/*.item a{
    position:relative;
    display:block;
    height:0;
    overflow:hidden;
    
    }
    
    a.UAS{padding-top: 100px;left: 35px;top: 155px;width: 410px;}
    a.Mine{padding-top: 90px;left: 395px;top: 155px;width: 430px;}
    a.Composite{padding-top: 95px;left: 320px;top: 150px;width: 515px;}
    a.Company{padding-top:100px;height:100px;left:100px; top:100px}
*/
</style>--%>

<%--<acms:JavascriptFile ID="jquery" Path="~/Scripts/swfobject.js" runat="server" />
<!--SWF OBJECT-->
    <script type="text/javascript">
    var hasFlash = false;
    var flashvars = {};
    flashvars.imgSrc = "<%= GetImgSrc() %>";
    var params = {
        menu: "false",
        scale: "noScale",
        allowFullscreen: "true",
        allowScriptAccess: "always",
        bgcolor: "#FFFFFF",
        wmode:"transparent"
    };
    var attributes = {
    id: "<%=pnlItem.ClientID %>"
    };
    swfobject.embedSWF("<%= GetFlash() %>", "<%=pnlItem.ClientID %>", "960px", "362px", "9.0.0", "../../Flash/expressInstall.swf", flashvars, params, attributes, outputStatus);

    function outputStatus(e) {
        if (e.success == true) {
            hasFlash = true;
            $('.flashHolder').removeClass('noFlash')
            //alert("success"+e.success)
        } else {
            //"fail"+e.success 
        }

    }
    
    </script>--%>

<style>
    #backBtn{display:none;}
/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.portalScrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 960px;
	height:270px;
	cursor:pointer;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.portalScrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.items div {
	float:left;
	background-repeat:no-repeat;
	background-position:top left;
	width:960px;
	height:270px;
}

ul#navPortal{margin:5px 0 0 0; padding:0;}
ul#navPortal li{float:left; margin-right:13px}
ul#navPortal li.active{}
ul#navPortal li.last{margin-right:0;}

/*ul#navPortal li#UnmannedAirSystems{background-position:0 bottom;}
ul#navPortal li#MineDetectionSystems{background-position:-230px bottom; }
ul#navPortal li#CompositeTechnologies{background-position:-460px bottom; }
ul#navPortal li#LatestNews{background-position:-690px bottom; }*/


ul#navPortal li a{
        display:block;
        width:230px;
        height:0px;
        overflow:hidden;
        padding-top:86px;
        background-image:url("Images/dbImages/Portal_ThumbSprite.jpg");
        background-repeat:no-repeat;
        }
        
ul#navPortal li#UnmannedAirSystems a{background-position:0 bottom;}
ul#navPortal li#MineDetectionSystems a{background-position:-230px bottom; }
ul#navPortal li#CompositeTechnologies a{background-position:-460px bottom; }
ul#navPortal li#LatestNews a{background-position:-690px bottom; }



ul#navPortal li#UnmannedAirSystems a.current{background-position:0 0;}
ul#navPortal li#MineDetectionSystems a.current{background-position:-230px 0; }
ul#navPortal li#CompositeTechnologies a.current{background-position:-460px 0; }
ul#navPortal li#LatestNews a.current{background-position:-690px 0; }


ul#navPortal li#UnmannedAirSystems a:hover{background-position:0 0;}
ul#navPortal li#MineDetectionSystems a:hover{background-position:-230px 0; }
ul#navPortal li#CompositeTechnologies a:hover{background-position:-460px 0; }
ul#navPortal li#LatestNews a:hover{background-position:-690px 0; }


ul#navPortal a.current{cursor:default;}
ul#navPortal a.current:hover{cursor:default;}


/*ul#navPortal li a:link{background-position:inherit bottom;}
ul#navPortal li a:visited{background-position:inherit bottom;}
ul#navPortal li a:hover{background-position:inherit; color:Red;}
ul#navPortal li a:active{background-position:inherit bottom;}*/

    


</style>

<script>
    // execute your scripts when the DOM is ready. this is mostly a good habit
    $(function() {
        var startpos;
        var endpos;
        // initialize scrollable


        $(".portalScrollable").scrollable({ circular: true, mousewheel: false, speed: 600 }).autoscroll({ autoplay: true, interval: 10000 }).navigator({
            navi: "#navPortal",
            naviItem: 'a',
            activeClass: 'current'

        });


        var api = $(".portalScrollable").data("scrollable");

        api.onSeek(function() {
        this.stop();
        this.play()
        });
        // use API to add our new item. after the item is being added seek to the end



        //        $("a.navPortal").bind("click", function() {
        //            pos = $(this).parent().index();
        //            //$("a.navApplication").removeClass("active");
        //            //$(this).addClass("active");
        //            //this.parent
        //            //alert(pos);
        //            api.seekTo(pos)
        //            return false
        //        });

        /*$("a.navPortal").each("click", function() {
        alert(this);
        return false
        });*/


        /*$(".portalScrollable").click(function() {
        api.next();
        })*/

    });
</script>


</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="contentTop" Runat="Server">

<%--<div style="display:none">
<img src="http://www.schiebel.net/Images/dbImages/NEW_PORTAL_UAS.jpg" />
<img src="http://www.schiebel.net/Images/dbImages/NEW_PORTAL_Mine.jpg" />
<img src="http://www.schiebel.net/Images/dbImages/NEW_PORTAL_FACTORY.jpg" />
<img src="http://www.schiebel.net/Images/dbImages/NEW_PORTAL_FACTORY.jpg" />
</div>--%>

<div id="top" style="position:relative" class="systemHolder">
    
    <!-- tab panes -->
    <div class="portalScrollable">
        <!-- wrapper for scrollable items -->
	    <div class="items">
	        <!-- the items -->
		    <div><acms:PostLinkImage ID="PostLinkImage4" CssClass="" ImageUrl="~/Images/dbImages/Portal_Hero_UAS.jpg" Path="~/Products/Unmanned-Air-Systems/CAMCOPTER-S-100/Introduction" runat="server" /></div>
		    <div><acms:PostLinkImage ID="PostLinkImage2" CssClass="" ImageUrl="~/Images/dbImages/Portal_Hero_Mine.jpg" Path="~/Products/Mine-Detection-Systems" runat="server" /></div>
		    <div><acms:PostLinkImage ID="PostLinkImage1" CssClass="" ImageUrl="~/Images/dbImages/Portal_Hero_Composite.jpg" Path="~/Products/Composite-Technology" runat="server" /></div>
		    <div><acms:PostLinkImage ID="PostLinkImage3" CssClass="" ImageUrl="~/Images/dbImages/Portal_Hero_News.jpg" Path="~/Company/News" runat="server" /></div>
		    
	    </div>
	</div>
    <ul id="navPortal" class="navi">
	    <li id="UnmannedAirSystems" ><a href="#UnmannedAirSystems" class="current">Unmanned Air Systems</a></li>
	    <li id="MineDetectionSystems" ><a href="#MineDetectionSystems">Mine Detection Systems</a></li>
	    <li id="CompositeTechnologies" ><a href="#CompositeTechnologies">Composite Technologies</a></li>
	    <li id="LatestNews" ><a href="#LatestNews">Latest News</a></li>
    </ul>
   
   
    <%--<div class="systemFlashPanels" style="position:relative; height:362px; width:960px">
        <asp:Panel runat="server" ID="pnlItem" CssClass="flashHolder noFlash">
            <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a>
        </asp:Panel>
    </div>--%>
    
    <%--<div class="clearfix" style="" id="subNav">
        <ul class="" id="navApplications">
            <li id="Li1">
                <acms:PostLink ID="PostLink4" CssClass="navApplication" runat="server" path="~/Products/Unmanned-Air-Systems" ToolTip="" Text="Unmanned Air Systems" />
            </li>
            <li id="Li2">
                <acms:PostLink ID="PostLink5" CssClass="navApplication" runat="server" path="~/Products/Mine-Detection-Systems" ToolTip="" Text="Mine Detection Systems" />
            </li>
            <li id="Li3">
                <acms:PostLink ID="PostLink6" CssClass="navApplication" runat="server" path="~/Products/Composite-Technology" ToolTip="" Text="Composite Technologies" />
            </li>
            <li id="Li4">
                <acms:PostLink ID="PostLink7" CssClass="navApplication" runat="server" path="~/Company/News" ToolTip="" Text="News" />
            </li>
        </ul>
    </div>--%>
</div>


</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentBase" Runat="Server">
</asp:Content>

